// 路由页也基本与js中一致，没有太多的状态需要管理
import { lazy, Suspense } from 'react'
import { BrowserRouter, Switch } from 'react-router-dom'

import { Spin } from 'antd'

import RouteGuard from './routeGuard'
// 状态声明
// 同一个接口文件可以在多处使用，这样就可以同时规范参数的传递与接收
import { Route } from '@/types/routes'

const Routes: Route[] = [
  {
    path: '/home',
    component: lazy(() => import('@/pages/Home')),
    // 下面两个属性可以不传，默认都为false
    unAuth: false, // 是否需要登陆授权
    unBagUp: false, // 是否需要用嵌套页包裏起来
  },
  {
    path: '/login',
    component: lazy(() => import('@/pages/Auth/Login')),
    unAuth: true,
    unBagUp: true,
  },
  {
    path: '/user',
    component: lazy(() => import('@/pages/User')),
  },
  {
    path: '/product',
    component: lazy(() => import('@/pages/Product')),
  },
]

export default function Router() {
  return (
    // 注意这里，使用懒加载必须配置Suspense，否则路由无法正常访问
    <Suspense
      fallback={
        <Spin className="global-loading" size="large" tip="加载中, 请稍候..." />
      }
    >
      {/* 将来我们的项目可能不会放在服务的根目录里，而是后台指定一个目录，为了能正常访问，我们需要指定一个根路由 */}
      {/* 注意：basename是叫默认的根路由，它是无法被react的loctaion属性获取到的 */}
      <BrowserRouter basename="/admin">
        <Switch>
          <RouteGuard Routes={Routes} />
        </Switch>
      </BrowserRouter>
    </Suspense>
  )
}
